<template>
  <div class="courseGoodOuter">
    <div class="courseGoodText">
      <div class="courseGoodTextL">
        <span class="hot">HOT</span>
        <span class="hotS"></span>
      </div>
      <div class="courseGoodTextR">上好课</div>
    </div>
    <ul class="courseGoodCart">
      <li class="courseGoodCartItem" v-for="item in newCourseList" :key="item.id">
        <div class="courseGoodCartItemImg">
          <img src="../../assets/imgs/card/1.jpg" alt="课程">
        </div>
        <div class="courseGoodCartItemText">
          <h3>{{ item.courseName }}</h3>
          <p>{{ useCourseType(item.courseLevel) }} <i class="iconfont icon-dian"></i> {{ item.clicks }}</p>
          <span class="coursePrice">￥{{ item.discountPrice }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onBeforeMount, ref } from 'vue';
import { mostNew } from '../../request/api/api'
import { useIntersectionObserver } from '@vueuse/core'
import useCourseType from '../../hooks/useCourseType'

onBeforeMount(() => {
  getNewCourse()
})

// 异步组件
const NewCourse = defineAsyncComponent(() => import('../../components/home/CourseGood.vue'))
const target = ref(null)
const targetIsVisible = ref(false)
const { } = useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
    if (isIntersecting) {
      targetIsVisible.value = isIntersecting
    }
  }
)

// 最新课程数据
const newCourseList = ref([{
  id: 0,
  courseName: '',  // 课程名
  clicks: 0,  // 报名人数
  discountPrice: 0,  // 价格
  courseLevel: 0,  // 等级
}])

// 获取最新课程
const getNewCourse = async () => {
  const { data: res } = await mostNew({
    pageNum: 1,
    pageSize: 8,
  })
  newCourseList.value = res.pageInfo.list
}
</script>

<style lang="scss" scoped>
.courseGoodOuter {
  width: 80%;
  margin: 0 auto;

  .courseGoodText {
    display: flex;
    align-items: center;

    .courseGoodTextL {
      display: flex;

      .hot {
        width: 70px;
        height: 30px;
        background-color: rgb(237, 45, 45);
        color: white;
        text-align: center;
        line-height: 30px;
        border-radius: 5px 0 5px 5px;
      }

      .hotS {
        width: 0px;
        height: 0px;
        border: 4px solid rgb(237, 45, 45);
        border-right-color: transparent;
        border-bottom-color: transparent;
      }
    }

    .courseGoodTextR {
      position: relative;
      font-weight: bold;
      font-size: 20px;
    }

    .courseGoodTextR::after {
      content: '';
      width: 80px;
      height: 9px;
      border-radius: 5px;
      z-index: -1;
      background: linear-gradient(90deg, #fbfb4f 0%, #fea935 100%);
      position: absolute;
      left: 0;
      bottom: -5px;
    }
  }

  .courseGoodCart {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .courseGoodCartItem {
      width: 230px;
      border: 1px solid rgb(27, 87, 150);
      margin-bottom: 20px;
      padding-bottom: 10px;
      box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .3);

      .courseGoodCartItemImg {
        width: 230px;
        margin-bottom: 16px;

        &>img {
          width: 100%;
          height: 100%;
        }
      }

      .courseGoodCartItemText {
        height: 100px;
        display: flex;
        padding: 0 20px;
        flex-direction: column;
        justify-content: space-between;

        &>h3 {
          font-size: 16px;
        }

        &>p {
          font-size: 13px;
          color: rgb(99, 99, 99);
        }

        .coursePrice {
          font-size: 13px;
        }
      }
    }
  }
}
</style>